<script setup>
import { useRouter } from 'vue-router';
import { ref, watch, onMounted} from 'vue';
import Token from '@/api/token.js';

const router = useRouter();

// 假设这是当前登录用户的信息
const currentUser = ref({
	
});

// 定义当前路由索引、用来展示当前路由显示的数据
const currentRouteIndex = ref(null)
// 菜单数据结构
const menuItems = ref([
  {
    index: '1',
    title: '基本信息管理',
    icon: 'Odometer',
    children: [
      {title: '班级管理', name: 'ClassView'},
      {title: '语言管理', name: 'LangView'},
      {title: '模块管理', name: 'ModuleView'}
    ]
  },
  {
    index: '2',
    title: '用户管理',
    icon: 'Avatar',
    children: [
      {title: '学生信息管理', name: 'StudentView'},
      {title: '角色信息管理', name: 'RoleView'},
      {title: '企业用户信息管理', name: 'EnterpriseView'}
    ]
  },
  {
    index: '3',
    title: '任务管理',
    icon: 'Flag',
    children: [
      {title: '任务信息综合管理', name: 'TaskView'}
    ]
  },
  {
    index: '4',
    title: '系统管理',
    icon: 'Setting',
    children: [
      {title: '菜单管理', name: 'MenuView'},
      {title: '功能管理', name: 'FuncView'},
      {title: '权限分配', name: 'PermissionView'}
    ]
  }
]);

// 后期可以添加获取菜单数据的方法
const fetchMenuData = async () => {
  try {
    // const response = await fetch('/api/menu');
    // const data = await response.json();
    // menuItems.value = data;
  } catch (error) {
    console.error('获取菜单数据失败:', error);
  }
};

const navigateTo = (route) => {
  switch (route) {
    case 'home':
      router.push({ name: 'HomeView' });
      break;
    case 'userManagement':
      router.push({ name: 'UserManagement' });
      break;
    case 'settings':
      router.push({ name: 'Settings' });
      break;
    default:
      router.push({ name: 'HomeView' });
  }
};

const logout = () => {
  // 处理退出登录逻辑
  console.log("用户已退出登录");
};

watch(() => router.currentRoute.value.name, (newName) => {
  currentRouteIndex.value = newName;
});

// 使用钩子函数来在组件挂载后显示当前用户信息
onMounted(()=> {
    // 从localStorage中获取当前用户信息
	currentUser.value = Token.getCurrentUser()
	
})
</script>

<template>
  <el-container style="height: 100vh;">
    <el-header style="height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: #409EFF;">
      <div style="display: flex; align-items: center;">
        <h1 style="margin-right: 20px; font-size: 24px; font-weight: bold; color: white;">H-DOT</h1>
        <span style="color: white;">任务管理系统</span>
      </div>
      <el-dropdown>
        <div class="el-drop-user-info" style="display: flex; align-items: center;">
          <span style="color: white; margin-right: 10px;">{{ currentUser.name }}</span>
          <el-icon :size="24"><UserFilled /></el-icon>
        </div>
        
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="navigateTo('settings')">系统设置</el-dropdown-item>
            <el-dropdown-item @click="logout">用户退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="300px" style="background-color: #f0f2f5; padding: 10px; overflow-y: auto; height: calc(100vh - 60px);">
        <!-- 个人信息卡片 -->
        <el-card class="user-card" style="margin-bottom: 20px;">
          <div style="padding: 10px; display: flex; align-items: center;">
            <div>
              <p><el-icon :size="14"><Opportunity /></el-icon> 角色: {{ currentUser.roleName }}</p>
              <p><el-icon :size="14"><PhoneFilled /></el-icon> 电话: {{ currentUser.tel }}</p>
              <p><el-icon :size="14"><HomeFilled /></el-icon> 班级: {{ currentUser.className }}</p>
            </div>
          </div>
        </el-card>
        
        <!-- 左侧菜单 -->
        <el-menu
          :default-active="currentRouteIndex"
          class="el-menu-vertical-demo"
          :collapse="false"
          router unique-opened>
          <el-sub-menu v-for="menu in menuItems" :key="menu.index" :index="menu.index">
            <template #title>
              <el-icon><component :is="menu.icon" /></el-icon>
              <span>{{ menu.title }}</span>
            </template>
            <el-menu-item 
              v-for="subMenu in menu.children" 
              :key="subMenu.index" 
              :index="subMenu.name"
              :route="{name: subMenu.name}">
              {{ subMenu.title }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
* { margin: 0; padding: 0; }
el-header {
  background-color: #409EFF;
}
el-aside {
  background-color: #f0f2f5;
}
el-menu-item {
  font-size: 16px;
}
el-submenu {
  font-size: 16px;
}
.el-drop-user-info {
  cursor: pointer;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.user-card {
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* 渐变背景 */
}

.user-card p {
  margin: 15px 0; /* 为每个 p 标签添加上下间距 */
}

/* 自定义滚动条样式 */
.el-aside::-webkit-scrollbar {
  width: 2px;
}

.el-aside::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

.el-aside::-webkit-scrollbar-track {
  background-color: #f0f2f5;
}

:focus-visible {
    outline: none;
}
</style>
